<template>
  <el-switch
    v-model="isDark"
    active-text="夜间模式"
    inactive-text="白天模式"
    @change="toggleTheme"
    class="theme-switch"
  />
</template>

<script setup>
import { ref, watch } from 'vue'
const isDark = ref(false)

function toggleTheme() {
  if (isDark.value) {
    document.documentElement.classList.add('dark-theme')
    localStorage.setItem('theme', 'dark')
  } else {
    document.documentElement.classList.remove('dark-theme')
    localStorage.setItem('theme', 'light')
  }
}

// 初始化时读取本地主题
if (localStorage.getItem('theme') === 'dark') {
  isDark.value = true
  document.documentElement.classList.add('dark-theme')
}
</script>

<style scoped>
.theme-switch {
  margin-left: 16px;
  vertical-align: middle;
}
</style>
